<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<link rel="stylesheet" type="text/css" href="../static/easyui/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="../static/easyui/themes/icon.css">
<link rel="stylesheet" href="../static/css/style-app.css" />
<script src="../static/jquery/jquery-1.12.4.js"></script>
<script src="../static/easyui/jquery.easyui.min.js"></script>
<script src="../static/easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="../static/moment/moment.js"></script>
<title>压力监控</title>
</head>
<style>
.datagrid-mask-msg{
height:auto !important;
font-size:12px;
}
</style>
<body>
	<div class="top-part">
		<div class="header">
			<div class="return">
				<a href="../app/index.do"></a>
			</div>
			<div class="header-title">设备列表</div>
		</div>

	</div>
	<div class="table-container" data-options="region:'center'">
		<div>
			<table id="pro_table" class="easyui-datagrid" style="min-height: 100%">
			</table>
			<div id="pro_tb" class="search-show">
				<div class="search-input">
				<span>项目：</span>
				<span><input style="width: 100%;" id="projectitemid" name="projectitemid" class="easyui-combobox"
						editable="false"
						data-options="
							    valueField: 'id',
							    textField: 'name',
							    url: '../app/projectitemlist.do?status=2&random'+Math.random(),
							    onLoadSuccess : function(data){ 
								    if(data.length>0){
								    	$('#projectitemid').combobox('setValue',data[0].id);
							    	}
							    },onSelect: function(rec){
							    	projectitemid = rec.id;
							    	loadData()
							    },panelHeight: 'auto'"></span>
					
				</div>
				<div class="search-input text-right">
				</div>
			</div>
		</div>
	</div>
	<div id="proDlg2" class="easyui-dialog info_dialog"
		style="width: 95%; padding: 10px 20px; overflow-y: auto; top: 30px;" closed="true"
		buttons="#pro-dlg-buttons2">
		<div class="title"></div>
		<form id="proFm2" method="post">
			<div class="content_container">
				<table class="content_table">
					<tr>
						<td style="width: 50%;">间隔时间（分钟）：</td>
						<td>
							<input class="easyui-textbox" data-options="validType:'length[1,4]',required:true" id="timeblank" name="timeblank"
								style="width: 40%;" />
						</td>
					</tr>
				</table>
			</div>
		</form>
	</div>
	<div id="pro-dlg-buttons2">
		<a href="# " class="easyui-linkbutton ok" onclick="saveBlank()">保存</a>
		<a href="# " class="easyui-linkbutton btn-cancel " onclick="javascript:$('#proDlg2').dialog('close')">关闭</a>
	</div>
</body>
<script>
$(document).ready(function(){
	window.setInterval("run();", 1000);
});
function run() {
	if(moment().format('ss')=="00"){
		console.log("refresh")
		refreshProTable();
	}
}
	var currentPro;
	var projectitemid;
	function loadData() {
		$('#pro_table').datagrid({
			rownumbers : true,
			singleSelect : true,
			pagination : true,
			fitColumns : false,
			border : false,
			striped : true,
			toolbar : '#pro_tb',
			url : "../NewestPressureByProject",
			method : 'get',
			queryParams : {
				projectitemid : projectitemid
			},
			onSelect : function(index,row) {
				currentPro = row;
			},
			columns : [ [ {
				field : 'title',
				title : '项目名',
				width : '100%',
				formatter : function(value,row,index) {
					var datestr = '--';
					var rotate = '--';
					var push = '--';
					var mud = '--';
					var rotateclass = 'c-red';
					var pushclass = 'c-red';
					var mudclass = 'c-red';
					if(row.last){
						datestr = formatDateTime(row.last.date);
						rotate=row.last.rotate?row.last.rotate.toFixed(2):'-';
						push=row.last.push?row.last.push.toFixed(2):'-';
						mud=row.last.mud?row.last.mud.toFixed(2):'-';
						if(row.last.rotatestatus=='G'){
							rotateclass = 'c-green';
						}
						if(row.last.pushstatus=='G'){
							pushclass = 'c-green';
						}
						if(row.last.mudstatus=='G'){
							mudclass = 'c-green';
						}
					}
					var html = '';
					html += '<div class="info-unreviewed">'
					html += '<div class="info-item-content" style="width:'+ ellipsis() +'px;">'+ row.name +'</div>'
					html += '<div class="info-time">'+datestr+'</div>'
					html += '<div class="info-num col-3"><span class="'+mudclass+'"><b>泥浆</b>'+ mud +'<span class="info-unit">Mpa</span>'
					html += '</span><span class="'+rotateclass+'"><b>旋转</b>'+ rotate+'<span class="info-unit">Mpa</span></span><span class="'+pushclass+'"> '
					html += '<b>推拉</b>'+ push+'<span class="info-unit">Mpa</span></span></div>';
					if(row.workstatus==1){
						if(row.last&&row.last.workstatus=='W'){
							html += '<div class="info-status ok">工作中</div>';
						}else{
							html += '<div class="info-status ok">未工作</div>';
						}
					}else{
						html += '<div class="info-status ok">未工作</div>';
					}
					
					html += '<div class="edit"><span class="info-edit" onclick="setblank('+index+')"></span><span class="info-refresh" onclick="refreshsingle('+row.id+','+index+')"></span><span class="info-history" onclick="history('+row.id+','+index+')"></span></div>'
					return html;
					
				}
			} ] ]
		});
	}
	
	function refreshsingle(id,index){
		$.ajax({
			type : 'get',
			url : "../requirePressureData?id=" + id,
			contentType : "application/json",
			success : function(data) {
				if (data.success){
					load()
					setTimeout(function(){
						requireNewPressure(id,index);
						},3*1000);
				}else{
					$.messager.alert('刷新', data.errMsg, 'warn');
				}
			},
			dataType : "json"
		});
	}
	function history(id,index){
		window.location.href = "../app/pressurehistory.do?id="+id;
	}
	
	function setblank(index){
		currentPro = $("#pro_table").datagrid('getData').rows[index];
		if(currentPro){
			$("#proDlg2").dialog('open').dialog('setTitle', '更新上传间隔');
			$("#proFm2").form('clear');
		}
	}
	
	function saveBlank(){
		if (!$("#proFm2").form('validate'))
			return;
		$.ajax({
			type : 'POST',
			url : "../equipmentSetBlank.do?id="+currentPro.id+"&blank="+$("#timeblank").textbox("getValue"),
			contentType : "application/json",
			success : function(data) {
				if (data.success){
					$.messager.show({
						title : '更新',
						msg : '更新成功',
						timeout : 5000,
						showType : 'slide'
					});
					refreshProTable();
				}else{
					$.messager.alert('更新', data.errMsg, 'error');
				}
				$('#proDlg2').dialog('close');
			},
			dataType : "json"
		});
	}
	function requireNewPressure(id,index){
		$.ajax({
			type : 'get',
			url : "../NewestPressureBySingle?equipmentid=" + id,
			contentType : "application/json",
			success : function(data) {
				if(data){
					var rows = $('#pro_table').datagrid("getRows");
					rows[index] = data
					$('#pro_table').datagrid("loadData",rows);
				}
			},
			complete: function(){
				disLoad()
			},
			dataType : "json"
		});
	}
	function ellipsis(){
		var WIDTH = $("body").width();
		WIDTH-=10;
		var width;
		width = WIDTH-60
		return width;
	}
	function ellipsis2(){
		var WIDTH = $("body").width();
		var width;
		width = WIDTH-10
		return width;
	}	
	function refreshProTable() {
		$('#pro_table').datagrid("load", {
			projectitemid : projectitemid,
			random:Math.random()
		});
	}
	function load() {
	    $("<div class=\"datagrid-mask\"></div>").css({
	        display: "block",
	        width: "100%",
	        height: $(window).height()
	    }).appendTo("body");
	    $("<div class=\"datagrid-mask-msg\">加载中，请稍候。。。</div>").appendTo("body").css({
	        display: "block",
	        left: ($(document.body).outerWidth(true) - 190) / 2,
	        top: ($(window).height() - 45) / 2
	    });
	}
	//取消加载层  
	function disLoad() {
	    $(".datagrid-mask").remove();
	    $(".datagrid-mask-msg").remove();
	}
	
	function formatDateTime(time){
		if(time){
			return dateFormat("YYYY-mm-dd HH:MM:SS",new Date(time))
		}else{
			return '';
		}
	}
	function dateFormat(fmt, date) {
	    let ret;
	    let opt = {
	        "Y+": date.getFullYear().toString(),        // 年
	        "m+": (date.getMonth() + 1).toString(),     // 月
	        "d+": date.getDate().toString(),            // 日
	        "H+": date.getHours().toString(),           // 时
	        "M+": date.getMinutes().toString(),         // 分
	        "S+": date.getSeconds().toString()          // 秒
	        // 有其他格式化字符需求可以继续添加，必须转化成字符串
	    };
	    for (let k in opt) {
	        ret = new RegExp("(" + k + ")").exec(fmt);
	        if (ret) {
	            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (padStart(opt[k],ret[1].length, "0")))
	        };
	    };
	    return fmt;
	}
	function padStart(string,length,char){
		var str = string;
		for(var i=0;i<length-string.length;i++){
			str=char+str
		}
		return str
	}
</script>
</html>